<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getDictLabel, getDictAllData } from '@/services/dict'
import type { PageParams } from '@/types/global'
import { appBillPageAPI } from '@/services/my'
import type { DeliveryBillDTO, DeliveryBillPageParam } from '@/types/home'

import { useMemberStore } from '@/stores'
const { getUserInfo } = useMemberStore()
const { safeAreaInsets, windowHeight, screenWidth } = uni.getSystemInfoSync()

const initParams: PageParams = {
  page: 1,
  limit: 10,
}

const params = ref({ ...initParams } as PageParams)
// 当前积分余额
const pointsSourceTypeData = ref([] as any[])

// 筛选类型
const filterTypes = [
  { label: '全部', value: 'all' },
  { label: '收入', value: 'in' },
  { label: '支出', value: 'out' },
]

const currentFilter = ref('all')

const hasMore = ref(true)
const loadStatus = ref('上拉加载更多')

// 切换筛选条件
const changeFilter = (type: any) => {
  if (currentFilter.value === type) return
  currentFilter.value = type
  // loadData(true)
}

const activeIndex = ref(0)
const pointTabs = ref([
  { name: '全部', id: 0, type: null },
  { name: '收入', id: 1, type: 1 },
  { name: '支出', id: 2, type: 0 },
])
// 页面加载

onLoad(async () => {
  pointsSourceTypeData.value = await getDictAllData('points_source_type')

  uni.startPullDownRefresh()
  await request()
})

const noMore = ref(false)
const pointList = ref<DeliveryBillDTO[]>([])
const page = ref(1)
const limit = ref(5)
const total = ref(0)
const finish = ref(false)
const keyword = ref(null)

const request = async () => {
  if (finish.value === true) {
    return
  }

  finish.value = true
  const res = await appBillPageAPI({ ...params.value, driverId: getUserInfo()?.id })
  pointList.value = [...pointList.value, ...res.data.list]
  total.value = res.data.total
  finish.value = false
}

// 滚动触底
const onScrolltolower = async () => {
  if (finish.value === true) {
    return
  }
  if (pointList.value.length < total.value) {
    params.value.page = params.value.page + 1
  } else {
    noMore.value = true
    return
  }
  await request()
}

const triggered = ref(false) // 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发

const onPulling = (e: any) => {
  if (e.detail.deltaY < 50) return // 防止上滑页面也触发下拉
  triggered.value = true
}
// 自定义下拉刷新被复位
const onRestore = () => {
  triggered.value = false
}
// 自定义下拉刷新被中止
const onAbort = () => {
  console.error('onAbort')
}

// 自定义下拉刷新被触发
const onRefresh = async () => {
  if (finish.value === true) {
    return
  }
  pointList.value = []
  params.value = {
    ...params.value,
    ...initParams,
  }
  await request()
  triggered.value = false
}

const tabHandler = async (item: any, index: number) => {
  activeIndex.value = index
  params.value = { ...initParams, type: item.type }
  pointList.value = []
  await request()
}
</script>

<template>
  <view class="points-detail" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
    <!-- 头部统计 -->
    <view class="header">
      <view class="balance"
        >个人账单：<text class="num">{{ total }}</text></view
      >
    </view>

    <!-- 筛选选项 -->
    <!-- <view class="tabs">
      <text
        class="item"
        :class="{ active: activeIndex === index }"
        v-for="(item, index) in pointTabs"
        :key="item.id"
        @click="tabHandler(item, index)"
      >
        {{ item.name }}
      </text>
      <view class="cursor" :style="{ left: activeIndex * 33.33 + '%' }"
        ><view class="inner"></view
      ></view>
    </view> -->

    <!-- 明细列表 -->
    <scroll-view
      class="list-container"
      scroll-y
      :show-scrollbar="false"
      @scrolltolower="onScrolltolower"
      :refresher-enabled="true"
      :refresher-triggered="triggered"
      :refresher-threshold="100"
      refresher-background="#F5F5F7"
      @refresherpulling="onPulling"
      @refresherrefresh="onRefresh"
      @refresherrestore="onRestore"
      @refresherabort="onAbort"
      enable-back-to-top
    >
      <view class="con-wrap" v-if="pointList.length > 0">
        <view v-for="(item, index) in pointList" :key="index" class="list-item">
          <view class="item-left">
            <view class="type">距离:{{ item.baseDistance }}</view>
            <view class="time">{{ item.createDate }}~{{ item.updateDate }}</view>
          </view>
          <view class="item-right">
            <view :class="['points', item.type === 1 ? 'in' : 'out']">
              费用: {{ item.baseDistanceFee }}</view
            >
          </view>
        </view>
      </view>

      <view v-else class="empty">
        <text>暂无积分记录</text>
      </view>

      <!-- <view class="load-more">{{ loadStatus }}</view> -->
    </scroll-view>
  </view>
</template>

<style lang="scss">
@import '@/styles/variables.scss';

page {
  height: 100%;
  overflow: hidden;
  background-color: #fff;
}

.points-detail {
  background-color: #f8f8f8;
  height: 100%;
  display: flex;
  flex-direction: column;

  .header {
    padding: 40rpx 30rpx;
    background-color: #fff;
    text-align: center;

    .balance {
      font-size: 32rpx;
      color: #666;

      .num {
        color: #e63946;
        font-weight: bold;
        font-size: 48rpx;
        margin-left: 10rpx;
      }
    }
  }

  .tabs {
    display: flex;
    justify-content: space-around;
    line-height: 60rpx;
    margin: 0 10rpx;
    background-color: #fff;
    box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
    position: relative;
    z-index: 9;

    .item {
      flex: 1;
      text-align: center;
      padding: 20rpx;
      font-size: 28rpx;
      color: #4b5563;
      font-weight: $font-medium-weight;

      &.active {
        color: #ef4444;
      }
    }

    .cursor {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 33.33%;
      height: 6rpx;
      padding: 0 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      .inner {
        height: 100%;
        width: 50%;
        background-color: #ef4444;
      }
      /* 过渡效果 */
      transition: all 0.4s;
    }
  }

  .list-container {
    .con-wrap {
      padding: 20rpx;
    }
    .list-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      background-color: #fff;
      border-bottom: 1rpx solid #eee;

      .item-left {
        .type {
          font-size: 30rpx;
          color: #333;
          margin-bottom: 10rpx;
        }

        .time {
          font-size: 24rpx;
          color: #999;
        }
      }

      .item-right {
        .points {
          font-size: 32rpx;
          font-weight: bold;

          &.in {
            color: #4caf50;
          }

          &.out {
            color: #e63946;
          }
        }
      }
    }

    .empty {
      text-align: center;
      padding: 100rpx 0;
      color: #999;

      image {
        width: 200rpx;
        height: 200rpx;
        margin-bottom: 20rpx;
      }
    }

    .load-more {
      text-align: center;
      padding: 20rpx;
      color: #999;
      font-size: 28rpx;
    }
  }
}
</style>
